<template>
  <div class="dataLoad">
    <el-card class="dataLoad_header mb-2"> 数据加卸载与处理 </el-card>
    <el-card class="dataLoad_main mb-2">
      <div class="dataLoad_main_search mb-2">
        <el-input style="flex: 14" placeholder="请输入文件名名称进行检索" />
        <el-button type="success" @click="handleOpenUploadDialog"
          >上传</el-button
        >
        <el-button type="primary" @click="handleOpenFileDialog">新建</el-button>
      </div>
      <div class="dataLoad_main_table">
        <el-table style="height: 100%" :data="dataLoadTableData">
          <el-table-column prop="date" label="日期" />
          <el-table-column prop="type" label="类型" />
          <el-table-column prop="name" label="文件名称" />
          <el-table-column prop="size" label="大小" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button
                :type="row.loading ? 'danger' : 'success'"
                :icon="row.loading ? CircleClose : CircleCheck"
                @click.prevent="handleLoadFile(row)"
                >{{ row.loading ? "卸载" : "加载" }}</el-button
              >
              <el-button type="warning" :icon="Document">重命名</el-button>
              <el-button type="primary" :icon="Download">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-card>
      <div class="dataLoad_footer">
        <div class="dataLoad_footer_cell">
          <div class="dataLoad_footer_cell_title">公司名称:</div>
          <div class="dataLoad_footer_cell_value">
            {{ footerInfo.companyName }}
          </div>
        </div>
        <div class="dataLoad_footer_cell">
          <div class="dataLoad_footer_cell_title">软件版本:</div>
          <div class="dataLoad_footer_cell_value">
            {{ footerInfo.softBete }}
          </div>
        </div>
        <div class="dataLoad_footer_cell">
          <div class="dataLoad_footer_cell_title">时间:</div>
          <div class="dataLoad_footer_cell_value">{{ footerInfo.nowTime }}</div>
        </div>
      </div>
    </el-card>
    <el-dialog
      v-model="fileUploadDialog.dialogVisible"
      title="文件上传"
      width="600"
    >
      <el-upload class="upload-demo" drag multiple>
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">拖拽文件到此上传 <em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">
            <!--            jpg/png files with a size less than 500kb-->
          </div>
        </template>
      </el-upload>
    </el-dialog>
    <el-dialog
      v-model="fileFormDialog.dialogVisible"
      title="新建文件"
      width="600"
    >
      <el-form :model="fileFormDialog.data">
        <el-form-item prop="path" label="文件路径">
          <el-input v-model="fileFormDialog.data.path" />
        </el-form-item>
        <el-form-item prop="path" label="文件名称">
          <el-input v-model="fileFormDialog.data.path" />
        </el-form-item>
        <el-form-item prop="path" label="文件后缀">
          <el-input v-model="fileFormDialog.data.path" />
        </el-form-item>
        <el-form-item>
          <el-button type="warning">取消</el-button>
          <el-button type="primary">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import {
  CircleCheck,
  CircleClose,
  Download,
  Document
} from "@element-plus/icons-vue";

const footerInfo = reactive({
  companyName: "xxxxx公司",
  softBete: "v1.0.0",
  nowTime: "2024-9-20 09:16:26"
});

//表格数据
const dataLoadTableData = ref([
  {
    date: "2024/9/10 14:20:33",
    type: "Ⅰ",
    name: "XXX数据",
    size: "266MB",
    loading: false
  }
]);
//文件form
const fileFormDialog = reactive({
  dialogVisible: false,
  data: {
    path: "",
    fileName: "",
    fileSuffix: ""
  }
});
const fileUploadDialog = reactive({
  dialogVisible: false,
  data: {}
});

//打开文件form
function handleOpenFileDialog() {
  fileFormDialog.dialogVisible = true;
}
//打开文件上传
function handleOpenUploadDialog() {
  fileUploadDialog.dialogVisible = true;
}
//加/卸载文件
function handleLoadFile(row) {
  row.loading = !row.loading;
}
</script>

<style scoped lang="scss">
.dataLoad {
  height: calc(100% - 48px);
  .dataLoad_header {
    width: 100%;
    text-align: center;
    font-size: 24px;
  }
  .dataLoad_main {
    height: calc(100% - 96px);
    .dataLoad_main_search {
      display: flex;
      height: 32px;
      line-height: 32px;
      gap: 12px;
      .el-button {
        flex: 2;
      }
    }
  }
  .dataLoad_footer {
    display: flex;
    justify-content: right;
    .dataLoad_footer_cell {
      display: flex;
      .dataLoad_footer_cell_title {
        min-width: 120px;
      }
      .dataLoad_footer_cell_value {
        min-width: 120px;
      }
    }
  }
}
</style>
